<template>
	<tm-fullView>
		<tm-menubars title="滑动单元格" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-search placeholder="搜索小程序/公众号" @focus="showRightSearch=true" @blur="showRightSearch=false" confirmText="取消" :showRight="showRightSearch"></tm-search>
		<view class="shadow-24 ">
			<tm-switchList bgColor="grey-lighten-4" icon="https://picsum.photos/200" :dot="9" title="向左一个操作按钮向左一个操作按钮向左一个操作按钮向左一个操作按钮" rightLabel="大概在1小时前" :actions="item_0"></tm-switchList>
			<tm-switchList  bgColor="grey-lighten-4" icon="icon-supervise" color="blue" dot="999+" title="没有操作按钮,无法滑动" label="不提供滑动按钮,无法向左滑动." rightLabel="09:24" ></tm-switchList>
			<tm-switchList bgColor="grey-lighten-4" color="green" :dot="true" rightLabel="09:24" rightIcon="icon-comment-dots" icon="icon-comment-lines" title="向左滑动操作" label="有三个操作按钮" :actions="item_1" :on='open'></tm-switchList>
			<tm-switchList disabled color="yellow"  rightLabel="09:24" rightIcon="icon-comment-dots" icon="icon-applicationgroup" title="我被禁用,无法滑动" label="有三个操作按钮" :actions="item_1" :on='open'></tm-switchList>
			<tm-switchList color="blue"  rightLabel="09:24" rightIcon="icon-comment-dots" icon="icon-gem" title="向左滑动操作" label="有三个操作按钮" :actions="item_1" :on='open'></tm-switchList>
			<tm-switchList v-for="(item,index) in listLeng" :key="index"  
			
			dot="icon-check" color="orange"  rightLabel="09:24" 
			rightIcon="icon-comment-dots" icon="icon-gem" title="向左滑动操作" 
			label="有三个操作按钮" :actions="index==0?item_1:item_2"></tm-switchList>
			<tm-switchList @click="ct" :on='open_1' color="green"  rightLabel="09:24" rightIcon="icon-comment-dots" icon="icon-comment-lines" title="向左滑动操作" label="有三个操作按钮" :actions="item_1" >
				<template #right>
					<view @click.stop="open_1=!open_1" ><tm-button theme="green" block height="40" width="160"  size="s">插槽</tm-button></view>
				</template>
			</tm-switchList>
			<tm-switchList title="向左滑动操作2个按钮" label="不提供左图标将不显示左边" rightIcon="icon-exclamation-circle" :actions="item_2"></tm-switchList>
		</view>
		<view class="ma-32">
			<tm-button block @click="addOpen">打开、关闭项目</tm-button>
		</view>
	</tm-fullView>
</template>

<script>
	import tmSwitchList from '@/tm-vuetify/components/tm-switchList/tm-switchList.vue';
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
	
	export default {
		components: {
			tmSwitchList,
			tmMenubars,
			tmFullView,tmButton,tmSearch
		},
		data() {
			return {
				open:false,
				open_1:false,
				showRightSearch:false,
				item_0:[
					{text: "删除列表",width: 180,color: 'red'},
				],
				item_1:[
					{text: "删除",width: 140,color: 'red'},
					{text: "置顶",width: 140,color: 'black'},
					{text: "收藏",width: 110,color: 'grey'},
				],
				item_2:[
					{text: "删除",width: 140,color: 'red'},
					{text: "不好弄",width: 180,color: 'green'}
				],
				listLeng:1
			};
		},
		methods: {
			addOpen(){
				this.open=!this.open
				this.listLeng = 2
				
			},
			ct(e) {
				console.log(e);
			}
		},
	};
</script>

<style lang="scss"></style>
